<script setup lang="ts">
import { useTablePage } from '@/hooks/useTablePage'
import { getPageList, deleteById } from '@/api/system/menu'
import { Plus, Search, RefreshRight, Refresh } from "@element-plus/icons-vue"

const MenuEdit = defineAsyncComponent(() => import('./components/MenuEdit.vue'))
const SvgIcon = defineAsyncComponent(() => import('@/components/SvgIcon/SvgIcon.vue'))

/**
 * 表格参数
 */
const {
  tabRef,
  queryFormRef,
  editRef,
  loading, query, tableList,
  queryData,
  handleRefresh,
  handleQuery,
  resetForm,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<SysMenuType, SysMenuQuery>({ getPageList, deleteById })

// 获取行的信息，使勾选不变
function getRowKeys(row: any) {
  return row.id;
};

// 点击行，展开、收起子菜单
function toggleRow(row: SysMenuType) {
  //console.log('toggleRow', row);
  tabRef.value.toggleRowExpansion(row)
}
</script>

<template>
  <div class="h-full w-full flex flex-col">
    <div class="h-50px w-full border border-solid bg-#fff border-[#ddd] rounded-2 p-8px">
      <div class="h-full w-full flex items-center">
        <el-form class="h-full" inline :model="query" ref="queryFormRef">
          <el-form-item label="菜单名称" prop="query.title">
            <el-input v-model="query.title" placeholder="请输入菜单名称" class="w200px" clearable />
          </el-form-item>
          <el-form-item class="ml-20px">
            <el-button class="search-btn" :icon="Search" @click="handleQuery()">查 询</el-button>
            <el-button class="reset-btn" :icon="RefreshRight" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="h-[calc(100%-60px)] w-full border border-solid bg-#fff border-[#ddd] rounded-2 mt-10px px-10px">
      <div class="h-50px w-full py-10px flex items-center justify-between">
        <el-button class="tab-func-btn" :icon="Plus" @click="handleAdd()">新 增</el-button>
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-icon class="mr-50px cursor-pointer transition ease-in-out delay-100 hover:scale-130 duration-10"
            :size="20" @click="handleRefresh">
            <Refresh />
          </el-icon>
        </el-tooltip>
      </div>
      <el-table class="table-con h-[calc(100%-60px)]" ref="tabRef" :data="tableList" v-loading="loading"
        element-loading-text="正在加载中..." :header-cell-style="{ backgroundColor: '#F2F3F5' }" :row-key="getRowKeys"
        @row-click="toggleRow">
        <el-table-column prop="title" label="菜单名" align="left" header-align="center">
          <template #default="{ row }">
            <SvgIcon class="lh-49px" :name="row.meta?.icon || ''" />
            <span class="ml5">{{ row.meta.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由地址" align="center" />
        <el-table-column prop="component" label="组件地址" align="center" />
        <el-table-column prop="code" label="权限标识" align="center" />
        <el-table-column prop="type" label="类型" align="center" width="140">
          <template #default="{ row }">
            <el-tag effect="light" :type="row.type === '1' ? 'primary' : 'success'">
              {{ row.type === '1' ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="130"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="210">
          <template #default="{ row }">
            <el-button v-if="row.type != '2'" class="px-8px py-0" type="primary" size="small"
              :disabled="['首页', '仓库管理'].includes(row.meta.title)" @click.stop="handleAdd(row.id)">新增下级</el-button>
            <el-button type="primary" size="small" @click.stop="handleEdit(row)">编辑</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.meta?.title}】吗？`">
              <template #reference>
                <el-button :disabled="['首页', '系统管理'].includes(row.meta.title)" type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新增/编辑-->
    <menu-edit ref="editRef" @refresh="queryData"></menu-edit>
  </div>
</template>

<style scoped lang="scss">
.table-con {
  :deep(.el-table__row>.is-left) {
    .cell {
      display: flex;
      align-items: center;
    }
  }
}
</style>